<template>
    <div class="jx-content" >
        <div v-if="tableData !== ''">
            <div class="fl courseName">
                {{Titlename}}
            </div>
            <div class="btn-group fr">
            <el-form :inline="true">
                <el-form-item>
                <div class="button-style" @click="add">&emsp;新 增&emsp;</div>
                </el-form-item>
                <el-form-item>
                <div class="button-style" @click="impotInfo" >&emsp;导 入&emsp;</div>
                </el-form-item>
                <el-form-item>
                <div class="button-style" @click="deleteFn" >批量删除</div>
                </el-form-item>
                <el-form-item>
                <div class="button-style" @click="orderFn">调整顺序</div>
                </el-form-item>
            </el-form>
            </div>
            <el-table :data="tableData" style="width: 100%"  tooltip-effect="dark"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                 <el-table-column type="index" width="55" label="序号"></el-table-column>
                <el-table-column prop="name" label="章节名称" width="280"></el-table-column>
                <el-table-column prop="number" label="章节编号" ></el-table-column>
                <el-table-column prop="typeName" label="章节类型"></el-table-column>
                <el-table-column prop="introduction" label="章节简介" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button   @click.native.prevent="repeatRow(scope.row.id,scope.row.name,scope.row.typeName,scope.row.introduction,scope.row.technologyIds)"  type="text"  size="small">修改</el-button>
                        <el-button   @click.native.prevent="detailRow(scope.row.id,scope.row.typeName,scope.row.name)"  type="text"   size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :close-on-click-modal="false" title="调整排序" :visible.sync="dialogableable" width='530px' >
                 <div class="block" style="margin:0">
                     <span>{{Titlename}}</span>
                    <el-tree
                        :data="dataTree"
                        node-key="id"
                        default-expand-all
                        ref="treeSort"
                        draggable
                        :allow-drop="allowDrop"
                        @node-drag-start="handleDragStart"
                        @node-drag-end="handleDragEnd"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="chapterTitle">{{ node.label }}</span>
                            <span style="position:absolute; right:60px;">{{ data.number }}</span>
                            <span>
                                <i class="iconfont icon-diannao-copy " style=' color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type == 2 || data.type == 3"></i>
                            </span>
                        </span>
                    </el-tree>
                </div>
                <div class="saveBtn">
                    <button class="button-style saveBtn" @click=" handleNodeClick">保 存</button>
                </div>
            </el-dialog>
        </div>
        <div id="topic-models" v-else>
            <div class="button-center" >
            <span class="button-style" @click="add" >新增</span>
            </div>
            <div class="button-center">
            <span class="button-style" @click="impotInfo" >导入</span>
            </div>
        </div>
         <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialog" width='600px' @close="close"  >
            <el-form ref="form"  label-width="100px" :model="form"  :rules="rules">
                <el-form-item label="章节名称：" prop="name" >
                    <el-input v-model="form.name" maxlength="50"  placeholder="请输入章节名称" @input="dataInput2"></el-input>
                    <p style="position:absolute;  left: 215px; top: 10px; font-size:12px; color:#bbbbbb"> {{form.num}}/50</p>
                </el-form-item>
                <el-form-item label="章节类型：" prop="type" >
                    <el-select v-model="form.type" placeholder="请选择章节类型">
                        <el-option label="理论课" value="理论课"></el-option>
                        <el-option label="实验课" value="实验课"></el-option>
                        <el-option label="理论课及实验课" value="理论课及实验课"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="章节简介：">
                    <el-input type="textarea" v-model="form.desc" maxlength="100" @input="dataInput" placeholder="请输入章节简介"></el-input>
                    <p style="position:absolute;  left: 370px; top: 180px; font-size:12px;color:#bbbbbb"> {{form.titnum}}/100</p>
                </el-form-item>
                <el-form-item  label="所属技能："  prop="skill"  v-if="roleId=='SUPER_ADMIN' || roleId=='INTERNET_ADMIN'">
                     <el-select v-model="form.skill" multiple placeholder="请选择所属技能">
                        <el-option
                        v-for="item in form.skillList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item>
                    <span style="color:#1277eb"> 提示 : 切换的 '章节类型' 若不包含当前'章节类型' 的内容，将会删除当前 '章节类型' 的资源。</span>
                 </el-form-item>
            </el-form>
            <div class="footer" style="text-align:center">
                <button class="button-style saveBtn" @click="onSubmit('form')">确 认</button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="导入" :visible.sync="dialogable" width='600px'  >
            <div class="navBox">
                <span class="reportTemplate"  @click="toggleTabs(0)" :class="{templateCheck:cur == 0}">预置课程</span>
                <span class="testTemplate"  @click="toggleTabs(1)"  :class="{templateCheck:cur == 1}">自定义课程</span>
             </div>
            <div  v-show="cur==0">
                <div class="block">
                    <el-tree
                    :data="precutCourse"
                    show-checkbox
                    node-key="id"
                    ref="precut"
               
                    >
                    <span class="custom-tree-node" slot-scope="{ node, data}">
                        <span class="chapterTitle">{{ node.label }}</span>
                        <span style="position:absolute; right:60px;">{{data.number}}</span>
                        <span>
                            <i class="iconfont icon-diannao-copy"  style='color: #02aaff; position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
                        </span>
                    </span>
                    </el-tree>
                </div>
                <div class="saveBtn" v-if="precutCourse && precutCourse.length>0">
                    <button class="button-style saveBtn" @click="precutFn">保 存</button>
                </div>
            </div>
            <div  v-show="cur==1">
                <div class="block">
                    <el-tree
                    :data="customCourse"
                    show-checkbox
                    node-key="id"
                    ref="custom"
                   >
                    <span class="custom-tree-node" slot-scope="{ node, data}">
                        <span class="chapterTitle">{{ node.label }}</span>
                        <span style="position:absolute; right:60px;">{{data.number}}</span>
                        <span>
                            <i class="iconfont icon-diannao-copy"  style='color: #02aaff;position:absolute; right:20px; margin-top:5px' v-if="data.type==2 || data.type==3"></i>
                        </span>
                    </span>
               </el-tree>
               </div>
                <div class="saveBtn" v-if="customCourse && customCourse.length>0">
                    <button class="button-style saveBtn" @click="customFn">保 存</button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //角色
                roleId:'',
                //章节信息
                chapterInfoData:{},
                //标题
                 Titlename:'',
                //弹窗标题动态
                titles:'',
                //修改或新增 标识
                flag:'',
                //自定义课程数组
                customCourse:[],
                //预制课程数组
                precutCourse:[],
                //排序数组
                sortData:[],
                //页面的id
                id:'',
                //修改索引
                idIndex:'',
                //弹窗
                dialog:false,
                //导入弹层
                dialogable:false,
                //调整排序
                dialogableable:false,
                multipleSelection:[],
                //章节类表
                tableData: [],
                resultArray:[],
                form:{
                    name:'',
                    type:'',
                    desc:'',
                    titnum:100,
                    num:50,
                    //所属技能
                    skill:[],
                    skillList:[],
                },

                //自定义课程
                dataTree:[
                //   {
                //   id: 1,
                //   label: '一级 1',
                //     children: [{
                //         id: 9,
                //         label: '李辛'
                //       },{
                //         id: 8,
                //         label: '张三'
                //       },{
                //         id: 7,
                //         label: '李四'
                //       },{
                //         id: 6,
                //         label: '王五'
                //       }, {
                //         id: 10,
                //         label: '孙柏'
                //     }]
                //  },
                //    {id: 2,
                //     label: '一级 2',
                //     children: [{
                //         id: 9,
                //         label: '第1章李辛',
                //         number:1901,
                //         a:'实验课'
                //       },{
                //         id: 8,
                //         label: '第2章张三',
                //         number:1901,
                //       },{
                //         id: 7,
                //         label: '第3章李四',
                //         number:1901,
                //       },{
                //         id: 6,
                //         label: '第4章王五',
                //         number:1901,
                //         a:'实验课'
                //       }, {
                //         id: 10,
                //         label: '第5章孙柏'
                //     }]
                //     }
                ],
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
					],
                    type: [
                        { required: true, message: '请输入类型', trigger: 'blur' }
                    ],
                    desc: [
                        { required: true, message: '请输入章节目标', trigger: 'blur' }
                    ],

                },
                cur:0, //默认选中第一个tab
            }
        },
         created() {
             //好使的
             this.id = this.$localstorage.getLocalStorage('setCourseId')
             this.Titlename = this.$localstorage.getLocalStorage('CourseTitle')
             this.roleId=this.$store.state.user.roles[0]
             this.init();
             this.CourseTitle()
        },
        methods: {
            //初始化判断
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.id+'/chapter/list/owner').then((response) => {
                let res = response.data
                if(res.code == '200') {
                    self.$nextTick(() => {
                        self.tableData = res.data
                    })
                    //已经有章节,判断导航显示
                    self.$parent.mark = false
                    self.$parent.chaperFlag = false
                }else if(res.code == '404'){
                    self.tableData=''
                    //暂无章节,判断导航显隐藏
                    this.$parent.mark=true
                    this.$parent.chaperFlag=false

                }
            }).catch(err => {
                    self.$message.error(res.message)
            })
            //   if(this.tableData==''){
            //      //如果列表没有值
            //   }else{
            //      //如果列表有值
            //   }
            },
            //获取课程名称,目的是从首页进来时，课程名称不存在
            CourseTitle(){
                let self = this
                self.$http.get('/tes/course/'+self.id+'/chapter/0').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.Titlename = res.data.courseName
                        this.$localstorage.putLocalStorage('CourseTitle', self.Titlename)
                    }else{
                         self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            //修改信息
            repeatRow(id,name,typeName,introduction,technologyIds){
                let self = this
                this.dialog = true
                this.idIndex = id //记录修改的id值
                this.form.name = name
                this.form.type = typeName
                this.form.desc = introduction
                if(this.roleId=='SUPER_ADMIN' || this.roleId=='INTERNET_ADMIN'){
                    self.SelectAll()
                    if(technologyIds !=''){
                       self.form.skill = technologyIds.split(',').map(Number)
                    }else if(technologyIds ==''){
                        self.form.skill=[]
                    }
                }
                if(introduction.length>0){
                   this.form.titnum = 100- introduction.length
                }else{
                    this.form.titnum = 100
                }

                this.flag = 2 //修改标识
                this.titles = '修改章节'
                this.form.num =  50- name.length

            },
            //关闭
            close(){
                this.$nextTick( ()=>{
                    this.$refs.form.resetFields()
                })
            },
            //下拉所有信息
            SelectAll(){
                let self = this
                self.$http.get('/tes/technology/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.form.skillList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //详情
            detailRow(id,typeName,name){
                if(this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'){ //是老师
                   if(typeName=='理论课'){
                        this.$router.push({
                            path:'/Teaching/Course/Detail/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else if(typeName=='实验课'){
                        this.$router.push({
                            path:'/Teaching/Course/experiment/experimentFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else{
                        this.$router.push({
                            path:'/Teaching/Course/Theoretical/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                }else if(this.roleId == 'SUPER_ADMIN' || this.roleId == 'INTERNET_ADMIN' ){
                     if(typeName=='理论课'){
                        this.$router.push({
                            path:'/Admin/Detail/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                    else if(typeName=='实验课'){
                        this.$router.push({
                            path:'/Admin/experiment/experimentFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }else{
                        this.$router.push({
                            path:'/Admin/Theoretical/StudyFile'
                        })
                        this.chapterInfoData['chapterId'] = id
                        this.chapterInfoData['chapterType'] = typeName
                        this.chapterInfoData['chapterName'] = name
                        this.$localstorage.putLocalStorage('chapterInfoData', this.chapterInfoData)
                    }
                }

            },
            //切换事件
            toggleTabs(index){
                this.cur = index;
            },
            //新增
            add(){
                this.dialog = true
               // this.close()
                if(this.roleId=='SUPER_ADMIN' || this.roleId=='INTERNET_ADMIN'){
                   this.SelectAll()
                   this.form.skill=[]
                }
                this.form.name = ''
                this.form.type = ''
                this.form.desc = ''
                this.form.titnum = 100
                this.form.num = 50
                this.flag = 1 //新增标识
                this.titles = '添加章节'
            },
            //拖拽方法
            allowDrop(draggingNode, dropNode, type2){
                if(draggingNode.level === dropNode.level){
                    if(draggingNode.parent.id === dropNode.parent.id){
                       return type2 === 'next' || type2 === 'prev'
                    }
                }
              },
             //开始排序
            handleDragStart(){
                //排序分两种情况 1 如果用户没排序，点击保存传值，2 如果用户拖拽多次
                this.$set(this.sortData,'length',0)
            },
             //调整排序
            orderFn(){
                this.sort()
                this.dialogableable = true
                this.$set(this.sortData,'length',0)
            },
            //获取调整排序的数据
            sort(){
                let self = this
                self.$http.get('/tes/course/'+ self.id+'/chapter/ztree').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       //  self.dataTree = res.data
                         let result =[]
                         for(let i =0 ; i< res.data[0].children.length; i++){
                               let current=  res.data[0].children[i]
                               let label = '第'+ (i+1)+ '章 ' + res.data[0].children[i].label
                                result.push({
                                    ...current,
                                    label:label
                                })
                         }
                         self.dataTree = result
                         for(var i =0; i< self.dataTree.length; i++){
                              self.sortData.push( self.dataTree[i].id)
                         }
                    }
                })
                .catch(err => {
                     console.log(err)
                })
            },
            //排序
            handleDragEnd(draggingNode,node,location){
                let result2 = []
                let self = this
                //  for(let i = 0,len = node.parent.data.children.length; i<len;i++){
                //        let idlist= node.parent.data.children[i].id
                //        self.sortData.push(idlist)
                //   }
                for(let i = 0,len = self.dataTree.length; i<len;i++){
                    let current = self.dataTree[i]
                    let label = current.label.replace(/第(\d{1,})章/g, '第'+(i+1)+'章 ');
                    result2.push({ ...current,label:label})

                }
                // console.log( result2,9888)
                 self.dataTree = result2

                for(var i =0; i<result2.length; i++){
                     //此处是将id值加入到排序的数组
                     self.sortData.push(result2[i].id)
                 }

            },

            //调整顺序的保存
             handleNodeClick(){
                let self = this
                self.$http.post('/tes/course/'+ self.id+'/chapter/order-adjustments',self.sortData)
                .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.dialogableable = false
                       self.init()
                    }
                 })
                 .catch(err => {
                    console.log(err)
                  }
                )
            },

            //获取导入数据
            importData(){
                let self = this
                //1 预制课程  0 自定义课程
                self.$http.get('/tes/course/'+self.id+'/ztree?type=1').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.precutCourse = res.data
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
             //获取自定义数据
            importCustomData(){
                let self = this
                //1 预制课程  0 自定义课程
                self.$http.get('/tes/course/'+self.id+'/ztree?type=0').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.customCourse = res.data
                    }else{
                       self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
           //导入
            impotInfo(){
                this.dialogable = true
                 this.importData()
                 this.importCustomData()
            },
            //全选
            handleSelectionChange(val) {
                let valArr = []
                for(let i = 0; i < val.length; i++){
                    valArr.push(val[i].id)
                }
                this.multipleSelection = valArr
            },
            //删除章节
            deleteFn(){
               let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的章节',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/course/'+self.id+'/chapter/batch-delete/',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                           self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            //字数限制
            dataInput(){
                var txtVal = this.form.desc.length;
                this.form.titnum = 100 - txtVal
            },
             //字数限制
            dataInput2(){
                var txtVal = this.form.name.length;
                this.form.num = 50 - txtVal
            },
            //确认
            onSubmit(form){
                let self=this
                if( self.flag == 1){ //添加
                    self.$refs[form].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '文件保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                    self.$http.post('/tes/course/'+self.id+'/chapter/',{
                        introduction: self.form.desc,
                        name:self.form.name,
                        typeName: self.form.type,
                        technologyIdList:self.form.skill
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            self.init()
                            self.dialog = false
                            loading.close()
                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
                        }).catch(err => {
                            loading.close()
                            console.log(err)
                        })
                      }
                   })
               
                }else if(self.flag == 2){  //修改
                   
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                             self.$confirm('是否确定修改?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                            self.$http.put('/tes/course/'+self.id+'/chapter/'+ self.idIndex+'',{
                                introduction: self.form.desc,
                                name:self.form.name,
                                typeName: self.form.type,
                                technologyIdList:self.form.skill
                            }).then((response) => {
                                let res = response.data
                                if(res.code == '200') {
                                    this.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                    self.init()
                                    self.dialog = false
                                    
                                    //章节信息不加高亮
                                }else{
                                    self.$message.error(res.message)
                                }
                            })
                      
                        })
                    }
                })
                
              }
            },
            //预置课程
            precutFn() {
                let self = this
                let union=[]
                let arrlists2 = this.$refs.precut.getCheckedKeys()
                if(arrlists2.length==''){
                    self.$message({
                        message: '请选择导入的章节',
                        type: 'warning'
                    })
                    return
                }
                if(arrlists2.includes(undefined)){
                    union=arrlists2.filter(function(item){
                        return item != undefined
                    })
                }else{
                    union=arrlists2
                }
                self.$http.post('/tes/course/'+self.id+'/chapter/import-exist',union) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '保存成功',
                            type: 'success'
                         })
                         self.init()
                         self.dialogable = false
                         self.$set(self.multipleSelection,'length',0)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            //自定义课程
            customFn(){
                let self = this
                let union = []
                let arrlistscustom = this.$refs.custom.getCheckedKeys()
                if(arrlistscustom.length==''){
                    self.$message({
                        message: '请选择导入的章节',
                        type: 'warning'
                    });
                    return
                }
                if(arrlistscustom.includes(undefined)){
                    union=arrlistscustom.filter(function(item){
                        return item != undefined
                    })
                }else{
                    union=arrlistscustom
                }
                const loading = this.$loading({
                    lock: true,
                    text: '正在导入中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/course/'+self.id+'/chapter/import-exist',union) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '保存成功',
                            type: 'success'
                         })
                         self.init()
                         self.dialogable = false
                         self.$set(self.multipleSelection,'length',0)
                         loading.close()
                    }else{
                         self.$message.error(res.message)
                         loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },

        }
    }
</script>
<style scoped>
    .el-button--small:hover{
        color: #1277eb;
    }
    /* 调整拖拽样式 */
    .el-tree>>>.el-tree__drop-indicator {
        position: absolute;
        left: 0;
        right: 0;
        top: -30px;
        background: #fff;
        opacity: 1;
        height: 30px;
    }
    /* .el-tree>>>.el-tree-node__content:hover{
        background: #1277eb
    } */
    .el-tree>>> .el-tree-node{
        margin: 6px 0;
    }
     .el-form-item>>>.el-input__inner {
        width: 200px;
        height: 32px;
        border-radius: 4px;
    }
    .el-form>>>.el-textarea__inner {
        height: 200px;
        width: 350px;
        resize: none;
    }
    .el-form-item {
        margin-bottom: 22px;
    }
    .el-form-item>>>.el-form-item__content{
        height: auto;
    }
    .block::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .block::-webkit-scrollbar-thumb {
        background: #1277eb;
        border-radius:50px;
    }

    .chapterTitle{
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        display: inline-block
     }
     .custom-tree-node{
         padding-top: 10px;
     }
   
</style>
<style lang="scss" scoped>
 @import "./../../../styles/ypublic.scss";
.jx-content {
  width: 1200px;
  margin: 20px auto;
    .courseName{
          font-size: 18px;
     }
    #topic-models{
        padding: 200px 0;
        .button-center{
            text-align: center;
            .button-style{
                text-align: center;
                height:48px;
                line-height: 48px;
                border-radius: 48px;
                padding:0 106px;
                margin:10px;
            }
        }
    }
    .navBox{
        .reportTemplate{
            padding-bottom: 10px;
            margin-left: 190px;
             cursor: pointer;
        }
        .testTemplate{
            padding-bottom: 10px;
            margin-left: 40px;
            cursor: pointer;
        }
        .templateCheck{
            border-bottom:2px solid $yBlue;
            color: $yBlue;
            cursor: pointer;
        }

    }
     .block{
            margin: 20px 0;
            overflow-y: scroll;
            height: 300px;
        }
    .saveBtn{
            text-align: center;
            margin-top: 10px;
        }


}
</style>

